<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>碳排放计算器</title>
<link rel="stylesheet" href="static/styles.css">
<script src="static/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#calculate').click(function() {
        var distance = $('#distance').val(); // 获取用户输入的距离
        var transportType = $('#transportType').val(); // 获取用户选择的交通方式
        var carbonEmission = 0;

        // 根据交通方式计算碳排放量（示例值，实际值可能不同）
        switch (transportType) {
            case 'car':
                carbonEmission = distance * 0.120; // 假设每公里汽车排放0.120千克二氧化碳
                break;
            case 'plane':
                carbonEmission = distance * 0.150; // 假设每公里飞机排放0.150千克二氧化碳
                break;
            // 可以添加更多的交通方式和对应的排放因子
        }

        // 显示结果
        $('#result').text('估计的碳排放量: ' + carbonEmission.toFixed(2) + ' 千克');
    });
});
</script>
</head>
<body>

<h1>碳排放计算器</h1>

<div>
    <label for="distance">距离（公里）:</label>
    <input type="number" id="distance" placeholder="输入距离">
</div>

<div>
    <label for="transportType">交通方式:</label>
    <select id="transportType">
        <option value="car">汽车</option>
        <option value="plane">飞机</option>
        <!-- 可以添加更多的交通方式选项 -->
    </select>
</div>

<button id="calculate">计算碳排放</button>

<div>
    <p>估计的碳排放量: <span id="result">0</span> </p>
</div>

</body>
</html>
